<template>
  <div class="mj">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <div class="left-section">
            <span class="total-count">共计{{ total }}条</span>
            <!-- 增加一个切换排序方式的按钮 -->
            <div class="sorter-switch">
              <!-- <span class="switch-label">{{ isNewSorter ? '推荐排序' : '最新排序' }}</span> -->
              <el-switch
                v-model="isNewSorter"
                @change="handleSortChange"
                active-text="推荐"
                inactive-text="最新"
              />
            </div>
          </div>
          <el-button class="button" type="primary" @click="open('add')">新增</el-button>
        </div>
      </template>


      <el-table v-loading="loading" :data="mjData" style="width: 100%" empty-text="暂无数据" :table-layout="tableLayout">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="creator" label="作者" />
        <el-table-column prop="stem" label="标题" />
        <el-table-column prop="likeCount" label="喜欢" />
        <el-table-column prop="views" label="阅读" />
        <el-table-column prop="createdAt" label="日期" />

        <el-table-column label="操作">
          <template #default="data">
            <div class="icon-group">
              <el-tooltip class="item" effect="light" content="预览" placement="top">
                <el-button icon="View" @click="open('preview', data.row.id)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="light" content="编辑" placement="top">
                <el-button icon="Edit" @click="open('edit', data.row.id)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="light" content="删除" placement="top">
                <el-button icon="Delete" @click="del(data.row.id)"></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:currentPage="current" v-model:page-size="pageSize" background
        layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </el-card>
  </div>
  <!-- 抽屉组件 -->
  <el-drawer v-model="drawerDisplay" direction="ltr" size="50%">
    <template #title>
      <h4>{{title}}</h4>
    </template>
    <template #default>
      <div>
        <el-form v-if="drawType!=='preview'" ref="formRef" :model="mjDetail" :rules="rules">
          <el-form-item label="面经标题" prop="stem">
            <el-input v-model="mjDetail.stem" placeholder="请输入文章的标题"></el-input>
          </el-form-item>
          <el-form-item prop="content">
            <div>
              <QuillEditor v-model:content="mjDetail.content" content-type="html" placeholder="请输入文章的内容"
                :options="editorOptions" />
            </div>
            <!-- 关键：使用v-model双向绑定 -->
          </el-form-item>
        </el-form>

        <div v-else>
          <h3>{{mjDetail.stem}}</h3>
          <div v-html="mjDetail.content">
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
  </el-drawer>

</template>

<script setup>
// BUG修复：抽取清空表单数据的公共方法，避免代码重复
const resetMjDetail = () => {
Object.assign(mjDetail, {})
}
import { mjDetailRules } from '@/miscellaneous/index'
import { deleteMjData, getMjData ,getMjDetail, createMjData,updateMjData} from '@/api/goods'
import { ElMessage , ElMessageBox } from 'element-plus'
import { defineOptions, onMounted, ref, reactive  } from 'vue'
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
defineOptions({
  name: 'GoodsIndex'
})
const rules = reactive(mjDetailRules)
const total=ref(0)
const tableLayout = ref('fixed')
const mjData = ref([])
// 页数
const current = ref(1)
// 每页的数量
const pageSize = ref(10)
// 排序方式 (不传就是最新 传weight_desc就是推荐)
const sorter = ref('')
const loading = ref(false)
const drawerDisplay = ref(false)
const title = ref('')
const drawType = ref('')
const mjDetail = reactive({
  id:'',
  stem: '',  // BUG修复：修正拼写错误，原为stme
  content: '',
})
const formRef = ref(null)
const isNewSorter=ref(false)

// 排序切换处理
const handleSortChange = (val) => {
  // 根据Switch状态设置排序方式
  sorter.value = val ? 'weight_desc' : ''
  // 重置到第一页并重新加载数据
  current.value = 1
  loadMjData()
}
// 中文配置项（解决工具栏英文问题）
const editorOptions = {
  modules: {
    toolbar: [
      // 基础格式组
      ['bold', 'italic', 'underline', 'strike'],        // 加粗 斜体 下划线 删除线

      // 标题和引用组
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],         // 标题级别
      ['blockquote', 'code-block'],                       // 引用 代码块

      // 列表和缩进组
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序、无序列表
      [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进

      // 文本样式组
      [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
      [{ 'color': [] }, { 'background': [] }],           // 字体颜色、背景颜色
      [{ 'font': [] }],                                    // 字体类型
      [{ 'align': [] }],                                   // 对齐方式

      // 增强功能组
      ['link', 'image', 'video'],                          // 链接、图片、视频
      ['clean'],                                           // 清除格式

      // 额外实用功能
      [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
      ['formula']                                         // 数学公式
    ]
  },
  placeholder: '请输入面经内容，支持富文本格式...',
  theme: 'snow',
  readOnly: false,
  bounds: document.body
}
const loadMjData = async () => {
  loading.value = true
  try {
    const res = await getMjData({
      current: current.value,
      pageSize: pageSize.value,
      sorter: sorter.value
    })
    mjData.value = res.data.rows
    total.value=res.data.total
    loading.value = false

  } catch (error) {
    ElMessage.error(error.message)
    loading.value = false
  }
}
const del = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除这条面经吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 调用删除API
    await deleteMjData(id)

    // BUG修复：智能分页处理 - 当删除当前页最后一条数据时，自动跳转到上一页
    if (current.value > 1 && mjData.value.length === 1) {
      current.value--
    }

    ElMessage.success('删除成功!')

    // 重新加载数据，更新列表
    await loadMjData()

  } catch (error) {
    // BUG修复：更好的错误处理，区分用户取消和API调用失败
    if (error === 'cancel') {
      // 用户点击取消，不做任何操作
      console.log('用户取消了删除操作')
    } else {
      // API调用失败
      console.error('删除失败:', error)
      ElMessage.error(error.message || '删除失败，请重试')
    }
  }
}
const handleCurrentChange = (value) => {
  current.value = value
  loadMjData()
}
// 抽屉 - 打开面经编辑/预览弹窗
const open = async(model, id) => {
  // BUG修复：确保每次打开抽屉前清空旧数据，避免数据污染
  // 重置表单数据 - 关键：防止上次编辑的数据残留
  resetMjDetail()

  // 动态设置标题和类型
  drawType.value = model
  title.value = model === 'add' ? '新增' : model === 'edit' ? '编辑' : '预览'

  // BUG修复：延迟打开抽屉，确保DOM更新完成后再加载数据
  // 这样可以避免Quill编辑器内容回显失败的问题
  drawerDisplay.value = true

  // 数据回显逻辑 - 编辑和预览模式需要加载详情
  if (id) {
    mjDetail.id = id
    try {
      const res = await getMjDetail({id:mjDetail.id})
      // BUG修复：确保数据存在再赋值，防止undefined错误
      if (res.data) {
        // 使用|| ''确保即使数据为null也能正确显示空字符串
        mjDetail.stem = res.data.stem || ''
        mjDetail.content = res.data.content || ''
      }
    } catch (error) {
      console.error('获取面经详情失败:', error)
      ElMessage.error(error.message || '获取数据失败')
    }
  }
  // 新增模式 - 确保表单完全清空
  else if (model === 'add') {
    // BUG修复：确保新增模式下也清空数据
    // 注意：formRef可能还未渲染，所以不能直接调用resetFields
    resetMjDetail()
  }
}


const cancelClick=()=>{
  drawerDisplay.value = false
  resetMjDetail()
}


const confirmClick = () => {
  // BUG修复：优化确认逻辑，区分预览、编辑、新增三种模式
  ElMessageBox.confirm("您确认要提交吗？")
    .then(async () => {
      try {
        // 预览模式 - 直接关闭，不需要提交数据
        if (drawType.value === 'preview') {
          ElMessage.success('预览完成')
        }
        // 编辑和新增模式 - 需要表单验证和数据提交
        else {
          // BUG修复：确保formRef存在再调用验证
          if (!formRef.value) {
            ElMessage.error('表单未初始化')
            return
          }

          // 表单验证 - 确保数据完整性
          await formRef.value.validate()

          // BUG修复：根据模式区分处理新增和编辑
          if (drawType.value === 'edit') {
            // 编辑模式 - 更新现有数据
            if (!mjDetail.id) {
              ElMessage.error('缺少数据ID')
              return
            }

            await updateMjData({
              id: mjDetail.id,
              stem: mjDetail.stem.trim(), // BUG修复：去除首尾空格
              content: mjDetail.content.trim()
            })
            ElMessage.success('修改成功!')
          }
          else if (drawType.value === 'add') {
            // 新增模式 - 创建新数据
            await createMjData({
              stem: mjDetail.stem,
              content: mjDetail.content
            })
            ElMessage.success('新增成功!')
          }

          // 提交成功后刷新列表数据
         loadMjData()
        }

        // 关闭抽屉并清理数据
        resetMjDetail()
        drawerDisplay.value = false

      } catch (error) {
        // BUG修复：更好的错误处理，区分表单验证失败和API调用失败
        if (error === false) {
          // 表单验证失败
          ElMessage.error('请填写完整信息！')
        } else {
          // API调用失败
          console.error('提交失败:', error)
          ElMessage.error(error.message || '提交失败，请重试')
        }
      }
    })
    .catch(() => {
      // 用户点击取消，不做任何操作
      console.log('用户取消了操作')
      resetMjDetail()
    })
}
onMounted(() => {
  // 加载数据
  loadMjData()
});
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-section {
    display: flex;
    align-items: center;
    gap: 20px;

    .total-count {
      margin-right: 10px;
    }

    .sorter-switch {
      display: flex;
      align-items: center;
      gap: 8px;

      .switch-label {
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
      }
    }
  }
}

.icon-group {
  display: flex;
  justify-content: space-around;
  font-size: 28px;

  >i:hover {
    cursor: pointer;
    color: #0c78c0;
  }
}
/* 优化Quill编辑器样式 */
.editor-container {
  width: 100%;

  /* 强制覆盖Quill样式作用域 */
  :deep(.ql-toolbar) {
    border: 1px solid #dcdfe6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background-color: #f5f7fa;
    padding: 8px;

    /* 工具栏分组样式 */
    .ql-formats {
      margin-right: 12px;

      &:not(:last-child)::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 20px;
        background-color: #e4e7ed;
        margin-left: 12px;
        vertical-align: middle;
      }
    }

    /* 下拉菜单样式 */
    .ql-picker {
      .ql-picker-label {
        padding: 4px 8px;
        border-radius: 4px;

        &:hover {
          background-color: #e6e8eb;
        }
      }

      .ql-picker-options {
        background-color: white;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        padding: 4px 0;

        .ql-picker-item {
          padding: 6px 12px;

          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
    }
  }

  :deep(.ql-container) {
    height: 400px;
    min-height: 400px;
    border: 1px solid #dcdfe6;
    border-radius: 0 0 4px 4px;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 14px;
    line-height: 1.6;
  }

  :deep(.ql-editor) {
    padding: 12px;

    /* 优化段落间距 */
    p {
      margin-bottom: 8px;
    }

    /* 优化列表样式 */
    ul, ol {
      padding-left: 24px;
      margin-bottom: 8px;
    }

    /* 优化标题样式 */
    h1, h2, h3, h4, h5, h6 {
      margin-top: 16px;
      margin-bottom: 8px;
      font-weight: 600;
      color: #303133;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    h5 { font-size: 14px; }
    h6 { font-size: 12px; }

    /* 优化引用样式 */
    blockquote {
      border-left: 4px solid #409eff;
      padding-left: 16px;
      margin: 12px 0;
      color: #606266;
      font-style: italic;
      background-color: #f4f4f5;
      padding: 12px 16px;
      border-radius: 0 4px 4px 0;
    }

    /* 优化代码块样式 */
    pre {
      background-color: #2b2b2b;
      color: #f8f8f2;
      padding: 12px;
      border-radius: 4px;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 13px;
      overflow-x: auto;
      margin: 12px 0;

      code {
        background-color: transparent;
        color: inherit;
        padding: 0;
      }
    }

    /* 优化内联代码样式 */
    code {
      background-color: #f4f4f5;
      color: #e83e8c;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 13px;
    }

    /* 优化链接样式 */
    a {
      color: #409eff;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: all 0.3s ease;

      &:hover {
        text-decoration: none;
        border-bottom-color: #409eff;
      }
    }

    /* 优化图片样式 */
    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 8px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #e4e7ed;
    }

    /* 优化表格样式 */
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 12px 0;

      th, td {
        border: 1px solid #e4e7ed;
        padding: 8px 12px;
        text-align: left;
      }

      th {
        background-color: #f5f7fa;
        font-weight: 600;
        color: #303133;
      }

      tr:nth-child(even) {
        background-color: #fafafa;
      }
    }
  }

  /* 工具栏按钮悬停效果 */
  :deep(.ql-toolbar button:hover) {
    background-color: #e6e8eb;
  }

  /* 激活状态的工具栏按钮 */
  :deep(.ql-toolbar button.ql-active) {
    background-color: #409eff;
    color: white;
  }

  /* 视频样式 */
  :deep(.ql-video) {
    max-width: 100%;
    border-radius: 4px;
    margin: 8px 0;
  }
}
</style>
